<template>
  <div class="info-container no-drag" :style="containerStyle" v-if="contactDetail">
    <header>
      <yd-img
        width="60px"
        height="60px"
        :src="contactDetail.avatar"
        style="margin-right: 15px"
      ></yd-img>
      <div class="account-info">
        <div style="width: 100%; display: flex; justify-content: space-between">
          <div style="display: flex; align-items: center; font-size: 16px">
            <span style="margin-right: 5px; margin-bottom: 5px">{{
              contactDetail.isFriend
                ? contactDetail.contactInfo.contactRemark
                : contactDetail.nickname
            }}</span>
            <el-icon
              v-if="contactDetail.gender === 1"
              style="font-weight: bolder; font-size: 16px; color: deepskyblue"
              ><Female
            /></el-icon>
            <el-icon v-else style="font-weight: bolder; font-size: 16px; color: deeppink"
              ><Male
            /></el-icon>
          </div>
          <el-icon v-if="!isOwner && contactDetail.friend" style="color: rgb(158, 158, 158)"
            ><MoreFilled
          /></el-icon>
        </div>

        <div class="info-inner">
          <div v-if="!isOwner && contactDetail.friend">
            <span class="title">昵称：</span>
            <span>{{ contactDetail.nickname }}</span>
          </div>

          <div>
            <span class="title">微信号：</span>
            <span>{{ contactDetail.weChatCode }}</span>
          </div>

          <div>
            <span class="title">地区：</span>
            <span>{{ contactDetail.areaName ? contactDetail.areaName : '未知' }}</span>
          </div>
        </div>
      </div>
    </header>

    <ul class="other-container">
      <li v-if="!isOwner && contactDetail.friend">
        <div>
          <span class="title">备注</span>
          <span>{{
            contactDetail.isFriend
              ? contactDetail.contactInfo.contactRemark
              : contactDetail.nickname
          }}</span>
        </div>
      </li>

      <li v-if="contactDetail.friendCircle && contactDetail.friendCircle.length > 0">
        <div style="display: flex; align-items: center">
          <span class="title">朋友圈</span>
          <div v-for="(item, index) in contactDetail.friendCircle" :key="index">
            <div>
              <yd-img
                style="margin-right: 5px"
                width="30px"
                height="30px"
                fit="cover"
                :src="item"
              ></yd-img>
            </div>
          </div>
        </div>
      </li>

      <li v-else-if="contactDetail.friend">
        <div style="display: flex; align-items: center">
          <span class="title">朋友圈</span>
          <span>空空如也~</span>
        </div>
      </li>

      <li>
        <div v-if="contactDetail.commonGroupNumber">
          <span class="title">共同群聊</span>
          <span>{{ contactDetail.commonGroupNumber }}个</span>
        </div>
        <div style="margin: 5px 0">
          <span class="title">个性签名</span>
          <span>{{
            contactDetail.personalSignature ? contactDetail.personalSignature : '空空如也~'
          }}</span>
        </div>
        <div v-if="!isOwner && contactDetail.friend">
          <span class="title">来源</span>
          <span>{{ contactDetail.source ? contactDetail.source : '账号搜索添加' }}</span>
        </div>
      </li>
    </ul>

    <ul class="operator-container">
      <li  @click="handleSendMessage" v-if="contactDetail.friend">
        <span
          class="iconfont icon-chat"
          style="font-size: 20px; margin-bottom: 5px"
        ></span>
        发消息
      </li>
      <li v-if="!isOwner && contactDetail.friend">
        <el-icon class="icon"><Phone /></el-icon>
        语音聊天
      </li>
      <li v-if="!isOwner && contactDetail.friend">
        <el-icon class="icon"><VideoCamera /></el-icon>
        视频聊天
      </li>
      <li v-if="!contactDetail.friend" class="add-contact">
        <template v-if="contactStore.contactInfo?.applyInfo.isOwner">
          <div v-if="contactStore.contactInfo?.applyInfo.status === 0" class="add-contact-btn">
            <span style="color: rgb(158, 158, 158)">等待验证</span>
          </div>

          <div v-else class="add-contact-btn">
            <span style="color: rgb(158, 158, 158)">已添加</span>
          </div>
        </template>

        <template v-else-if="contactStore.contactInfo?.applyInfo">
          <div v-if="contactStore.contactInfo?.applyInfo.status === 0" class="add-contact-btn">
            <span @click="handleConfirm">通过验证</span>
          </div>
        </template>

        <div v-else-if="!isOwner" class="add-contact-btn">
          <span @click="handleApplyContact">添加到通讯录</span>
        </div>
      </li>
    </ul>
  </div>
  <div v-else style="width: 100%; height: 100%">
    <el-empty></el-empty>
  </div>
</template>

<script setup>
import { Female, Male, MoreFilled, Phone, VideoCamera } from '@element-plus/icons-vue'
import { onBeforeMount, ref, watch } from 'vue'
import ydImg from '@/components/img/index.vue'
import { useUserStore } from '@/stores/user'
import { useContactStore } from '../../../stores/contact'
import { useChatStore } from '../../../stores/chat'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import ws from '@/webSocket'

const contactStore = useContactStore()
const userStore = useUserStore()

const { contactDetail = null, width = '100%' } = defineProps(['contactDetail', 'width'])

const containerStyle = {
  width: width
}

const isOwner = ref(contactDetail.uid === userStore.uid)

watch(
  () => contactDetail,
  () => {
    isOwner.value = userStore.uid === contactDetail.uid
  }
)

// 点击添加联系人时
const handleApplyContact = () => {
  window.ipcRenderer.send('open-new-window', `/contact/apply/${contactDetail.uid}/0`, {})
}

// 点击通过验证时
const handleConfirm = () => {
  window.ipcRenderer.send('open-new-window', `/contact/apply/${contactDetail.uid}/1`, {})
}

const chatStore = useChatStore()
const router = useRouter()

// 点击发消息时
const handleSendMessage = () => {

  const time = Date.now()
  const reqObj = {
    contactName: contactDetail.nickname,
    contactId: contactDetail.uid,
    lastAvatar: contactDetail.avatar,
    createUser: userStore.uid,
    lastTime: time,
    isShow: 1,
    createTime: time
  }
  window.ipcRenderer.invoke('create-session', reqObj)
    .then(res => {
      if (!res) {
        ElMessage.error({message : '会话创建失败，请重试' , plain: true})
      } else {
        console.log('sessionId:' , res)
        reqObj.sessionId = res
        // ws.sendMessage({type: 'createSession', data: reqObj})
        chatStore.getSessionList()
        router.push('/chat')
      }
    })

}
</script>

<style scoped lang="less">
.info-container {
  padding: 25px;

  header {
    display: flex;

    .account-info {
      flex: 1;

      .info-inner {
        color: rgb(168, 168, 168);
        font-size: 12px;

        .title {
          display: inline-block;
          width: 50px;
        }
      }
    }
  }

  .other-container > li:first-child {
    border-top: rgb(230, 230, 230) 1px solid;
  }

  .other-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;

    li {
      padding: 15px 0;
      border-bottom: rgb(230, 230, 230) 1px solid;

      .title {
        width: 70px;
        color: rgb(168, 168, 168);
        display: inline-block;
      }
    }
  }

  .operator-container > div:last-child {
    margin-right: 0;
  }

  .operator-container {
    display: flex;
    box-sizing: border-box;
    padding: 25px 5px;
    padding-bottom: 0px;
    justify-content: space-around;

    li {
      display: flex;
      flex-direction: column;
      color: rgb(87, 107, 149);
      align-items: center;
      width: 70px;
      height: 60px;
      justify-content: center;
      margin-right: 0px;

      .icon {
        font-size: 22px;
        margin-bottom: 5px;
      }
    }

    .add-contact {
      width: 100%;

      .add-contact-btn {
        width: 130px;
        display: flex;
        justify-content: center;
        height: 35px;
        background-color: rgb(242, 242, 242);
        align-items: center;
        border-radius: 5px;
        color: black;
      }

      .add-contact-btn:hover {
        background-color: rgb(235, 235, 235);
      }
    }

    .add-contact:hover {
      background-color: white !important;
    }

    li:hover {
      background-color: rgb(242, 242, 242);
      cursor: pointer;
      border-radius: 5px;
    }
  }
}
</style>
